<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品-产品详情</title>
<link href="__STATIC__/index/css/base.css" rel="stylesheet" type="text/css" />
<link href="__STATIC__/index/css/css1.css" rel="stylesheet" type="text/css" />
<link href="__STATIC__/index/css/style1.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="__STATIC__/index/css/goods_detail.css" />
<link rel="stylesheet" href="__STATIC__/index/css/common.css" />
<link rel="stylesheet" href="__STATIC__/index/css/goods.css" />
<script type="text/javascript" src="__STATIC__/index/js/jquery-1.8.3.min.js"></script>

<script src="__STATIC__/index/js/jquery.simpleGal.js"></script>
<script src="__STATIC__/index/js/jquery-1.2.6.pack.js"></script>
<script src="__STATIC__/index/js/base.js"></script>
<script src="__STATIC__/index/js/lib.js"></script>
<script src="__STATIC__/index/js/zzsc.js"></script>

<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
    document.getElementById(show_div).style.display='block';
    document.getElementById(bg_div).style.display='block' ;
    var bgdiv = document.getElementById(bg_div);
    bgdiv.style.width = document.body.scrollWidth;
    // bgdiv.style.height = $(document).height();
    $("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
    document.getElementById(show_div).style.display='none';
    document.getElementById(bg_div).style.display='none';
};

</script>
</head>

<body>

<!--头部导航-->
<div class="nofix_head">
    <div class="top wrapper">
        <div class="float-lt margin-b10">
            <ul>
                {if $Think.session.user['id']}
                 <li>欢迎您，<a href="{:url('personal/index')}"><strong>{$Think.session.user['username']}</strong></a></li>
                 <li><a href="{:url('user/logout')}">退出</a></li>
                 {else}
                <li><a href="{:url('user/login')}" target="_blank" class=" colororange">请登录</a></li>
                <li><a href="{:url('user/register')}" target="_blank">注册会员</a></li>
                {/if}
            </ul>
        </div>
        <div class="float-rt">
            <ul>
                <li><a href="{:url('index/index')}" target="_blank">首页</a></li>
                <li><a href="{:url('personal/index')}">我的17</a></li>
                <li><a id="linkOrder" href="{:url('personal/order')}">我的订单</a></li>
                <li><a href="{:url('goods/index')}">商品分类</a></li>
                <li>我的购物车
                    {if $Think.session.user['id']}
                    <small class="num">{$shop_num}</small>
                    {else}
                    <small class="num">0</small>
                    {/if}
                </li>
            </ul>
        </div>
    </div>
</div>
<!--头部导航END--> 

<!--头部快捷栏-->
<div class="clear wrapper header">
    <div class="logo float-lt" style="margin-right:130px;cursor: pointer;"><a href="{:url('index/index')}"><img src="__STATIC__/index/images/logo1.png" width="193" height="97" /></a></div>
    <div class="search float-lt">
        <div class="search_list">
            <ul>
                <li class="current"><a href="#">产品</a></li>
                <li><a href="#">信息</a></li>
            </ul>
        </div>
        <div class="clear search_cur">
            <ul>
                <li>
                    <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text">
                </li>
            </ul>
            <ul>
                <li class="search_btn"><a href="product-list.html">搜索</a></li>
            </ul>
        </div>
        <div class="clear hotword">热门搜索词：香醋&nbsp;&nbsp;&nbsp;茶叶&nbsp;&nbsp;&nbsp;草莓&nbsp;&nbsp;&nbsp;葡萄&nbsp;&nbsp;&nbsp;菜油</div>
    </div>
   <div class="hd_Shopping_list" id="Shopping_list">
   <div class="s_cart"><a href="{:url('goods/shopping_cart')}">我的购物车</a> <i class="ci-right">&gt;</i><i class="ci-count" id="shopping-amount">
    {if $Think.session.user['id']}
    {$shop_num}
    {else}
    0
    {/if}
   </i></div>
   <div class="dorpdown-layer">
    <div class="spacer"></div>
    {if $shop_num == 0}
     <div class="prompt"></div><div class="nogoods"><b></b>购物车中还没有商品，赶紧选购吧！</div>
     {else}
     <ul class="p_s_list">
        {volist name="cars" id="vo"}       
        <li>
            <div class="img"><img src="{$vo.picture}"></div>
            <div class="content"><p class="name"><a href="#">{$vo.gname}</a></p><p><span class="n">数量：<strong>{$vo.num}</strong></span>&nbsp;<span>总计：￥{$vo.price*$vo.num}</span></p></div>
            <div class="Operations">
            <p class="Price">￥{$vo.price}</p>
            <p><a href="#">删除</a></p></div>
         </li>
        {/volist}
    </ul>
    {/if}       
     <div class="Shopping_style">
     <div class="p-total">共<b>{$shop_num}</b>件商品　共计<strong>￥ </strong></div>
      <a href="Shop_cart.html" title="去购物车结算" id="btn-payforgoods" class="Shopping">去购物车结算</a>
     </div>  
   </div>
 </div>
</div>
<script>
$(function(){
     //购物车
 $("div.hd_Shopping_list").hover(function(){
            $(this).addClass("hover");
            //$(this).children(".dorpdown-layer").attr('class','');
        },function(){
            $(this).removeClass("hover");  
            //$(this).children(".dorpdown-layer").attr('class','');
        }
    ); 
})
</script>
<!--头部快捷栏END-->
<div class="clear">&nbsp;</div>

<!--网站头部-->
<div class="sup-wid">
    <div><img src="__STATIC__/index/images/TB27.gif" width="100%"/></div>

<div style="width: 980px;margin: 0 auto;">
<div class=" clear bread"><a href="#">首页</a> <span class="pipe">&gt;</span> <a href="#">某供应商</a> <span class="pipe">&gt;</span> <a href="#">某产品</a></div>
    <div class="pro_detail" >
            <div class="pro_detail_img float-lt">
                <div class="gallery">
                    <div class=jqzoom id=spec-n1 ><img height=350
                    src="{$goods->picture}" jqimg="{$goods->picture}" width=350 _src="{$goods->picture}" />
                    </div>
                    <div id=spec-n5>
                        <div class=control id=spec-left>
                            <img src="__STATIC__/index/product/left.gif" />
                        </div>
                        <div id=spec-list>
                            <ul class=list-h>
                                {volist name="pics" id="vo"}
                                <li><img src="{$vo.picture}"> </li>
                                {/volist}
                            </ul>
                        </div>
                        <div class=control id=spec-right>
                            <img src="__STATIC__/index/product/right.gif" />
                        </div>  
                    </div>
                </div>
                <input type="button" value="加入收藏" id="h1" class="addcart" onclick="ShowDiv('MyDiv2','fade2')" />
            </div>
    <script type="text/javascript">
    $(function(){           
       $(".jqzoom").jqueryzoom({
            xzoom:400,
            yzoom:400,
            offset:10,
            position:"right",
            preload:1,
            lens:1
        });
        $("#spec-list").jdMarquee({
            deriction:"left",
            width:350,
            height:56,
            step:2,
            speed:4,
            delay:10,
            control:true,
            _front:"#spec-right",
            _back:"#spec-left"
        });
        $("#spec-list img").bind("mouseover",function(){
            var src=$(this).attr("src");
            $("#spec-n1 img").eq(0).attr({
                src:src.replace("\/n5\/","\/n1\/"),
                jqimg:src.replace("\/n5\/","\/n0\/")
            });
            $(this).css({
                "border":"2px solid #ff6600",
                "padding":"1px"
            });
        }).bind("mouseout",function(){
            $(this).css({
                "border":"1px solid #ccc",
                "padding":"2px"
            });
        });             
    })

    $(function(){
        $("#h1").toggle(function(){
        $("#h1").css("background-image","url('images/iconfont-xingxingman_add.png')");
        },function(){
        $("#h1").css("background-image","url('images/iconfont-xingxingman_add.png') ");
        });
    }); 
    </script>
    <div class="float-lt pro_detail_con">
        <div class="pro_detail_tit">{$goods->gname}</div>
        <div class="clear"></div>
        <div class="pro_detail_price  margin-t20"><span class="margin-r20">市场价</span><span style=" font-size:16px"><s>￥{$goods->market_price}</s></span></div>
        <div class="clear"></div>
        <div class="pro_detail_act margin-t20 fl"><span class="margin-r20">售价</span><span class="myprice" style="font-size:26px; font-weight:bold; color:#dd514c;">￥<b>{$goods->price}</b></span></div>
        <div class="clear"></div>
        <div class="act_block margin-t5"><span>本商品可使用9999积分抵用￥9.99元</span></div>
        <div class="pro_detail_number margin-t30">
            <div class="margin-r20 float-lt">数量</div>
            <div class="pay_num"> <i class="sub_num" style="cursor: pointer;"></i>
                <input type="text" value="1" class="float-lt choose_input"/>
                <i class="add_num" style="cursor: pointer;"></i> <span>&nbsp;件</span> <span>（库存{$goods->stock}件）</span> </div>
            <div class="clear"></div>
        </div>
        <div class="guige">
            <div class="margin-r20 float-lt" style="line-height:25px;">规格</div>
            <ul>
                <li class="guige-cur">规格一</li>
                <li>规格二</li>
                <li>规格三</li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="pro_detail_number margin-t20">
            <div class="margin-r20 float-lt">月成交量：<span class="colorred"><strong>{$goods->sales}件</strong></span></div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="pro_detail_btn margin-t30">
            <ul>
                <li class="pro_detail_shop"><a href="javascript:void(0)">立即购买</a></li>
                <li class="pro_detail_add"><a href="javascript:void(0)" >加入购物车</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="clear"></div>
<script>
$(function(){
    var stock = {$goods->stock};

    // 数量加
    $('.pay_num .add_num').click(function(){
        var cur_num =  parseInt($('.pay_num input').val());
        if (cur_num < stock) {
            cur_num += 1;
        } else{
            $(this).attr('disable',true);
        }
        $('.pay_num input').attr('value',cur_num);
    });

    // 数量减
    $('.pay_num .sub_num').click(function(){
        var cur_num =  parseInt($('.pay_num input').val());
        if (cur_num > 1) {
            cur_num -= 1;     
        } else{
            $(this).attr('disable',true);
        }
        $('.pay_num input').attr('value',cur_num);
    });

    // 立即购买
    $('.pro_detail_shop a').click(function(){
        url = "{:url('order/create_order')}";
        {if $Think.session.user['id']}
            uid = {$Think.session.user['id']};
        {else}
            $('#login').show();
            return;
        {/if}
        gid = {$goods->id};
        gname = $('.pro_detail_tit').html();
        price = $('.pro_detail_act .myprice b').html();
        picture = $('#spec-n1 img').attr('_src');
        num = $('.pay_num input').val();
        data = {
            'uid' : uid,
            'gid' : gid,
            'gname' : gname,
            'price' : price,
            'picture' : picture,
            'num' : num,
        };
        $.post(url,data,function(result){
            if(result.code == 1) {
                location.href = result.data;
            }else {
                alert(result.msg);
            }
        },'json')
    });
    // 加入购物车
    $('.pro_detail_add a').click(function(){
        url = "{:url('goods/shop_car')}";
        {if $Think.session.user['id']}
            uid = {$Think.session.user['id']};
        {else}
            $('#login').show();
            return;
        {/if}
        gid = {$goods->id};
        gname = $('.pro_detail_tit').html();
        price = $('.pro_detail_act .myprice b').html();
        picture = $('#spec-n1 img').attr('_src');
        num = $('.pay_num input').val();
        data = {
            'uid' : uid,
            'gid' : gid,
            'gname' : gname,
            'price' : price,
            'picture' : picture,
            'num' : num,
        };
        $.post(url,data,function(result){
            if(result.code == 1) {
                ShowDiv('MyDiv','fade');
            }else {
                alert(result.msg);
            }
        },'json');
    });



    $(".pro_tab li").each(function(i){
        $(this).click(function(){
            $(this).addClass("cur").siblings().removeClass("cur");
            $(".conlist .conbox").eq(i).show().siblings().hide();
        });
    });
});
</script>
    <div class="pro_con margin-t55" style="overflow:hidden;">
        <div class="pro_tab">
            <ul>
                <li class="cur">产品介绍</li>
                <li>累计评价（{$comments|count}）</a></li>
            </ul>
        </div>
        <div class="conlist">
            <div class="conbox" style="display:block;">{$goods->description}
            <h2 style="font-size: 18px;padding:20px 0;font-weight: 700;">商品展示</h2>
            <div class="picture">
                <ul class=list-h>
                    {volist name="pics" id="vo"}
                    <li><img src="{$vo.picture}" width="600" height="600"> </li>
                    {/volist}
                </ul>
            </div>
            </div>
            <div class="conbox">
                <div class="pro_judge">
                    <ul>
                        <li class="cur">
                            <input name="RadioGroup1" type="radio" value="" checked="checked" id="RadioGroup1_0" />
                            全部（{$comments|count}）</li>
                        <li>
                            <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_1" />
                            好评（{$comments|count}）</li>
                        <li>
                            <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_2" />
                            中评（0）</li>
                        <li>
                            <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_3" />
                            差评（0）</li>
                    </ul>
                    <table width="100%" border="0">
                        {volist name="comments" id="vo"}
                        <tr>
                            <td width="80" align="left"><a href=""  class="preview">
                            {if $vo.plphoto}
                            <img src="{$vo.plphoto}" width="60" height="60" class="border_gry" />
                            {/if}
                            </a>
                            </td>
                            <td>{$vo.content|empty ? '此用户没有填写评论！' : $vo.content}<br />
                                <br />
                                <span class="pro_judge_time">{$vo.create_time}</span></td>
                            <td>{$vo.uid|getUserById}</td>
                        </tr>
                        {/volist}
                    </table>
                </div>
            </div>
        </div>
    </div>  
</div>
<div class="clear">&nbsp;</div>
{include file="common/footer" /}
</div>
<!--弹出层时背景层DIV--> 

<!--商品添加成功DIV-->
<div id="fade" class="black_overlay"> </div>
<div id="MyDiv" class="white_content">
    <div  style="width:385px; height:30px; background:#1ba67f; padding-left:15px; color:#fff; line-height:30px; font-size:14px;"> <span onclick="CloseDiv('MyDiv','fade')">
        <input type="button" class="addbtn">
        </span>加入购物车</div>
    <div class="dialogbox">
        <p>商品添加成功！</p>
    </div>
</div>


<!--商品收藏成功DIV-->
<div id="fade2" class="black_overlay"> </div>
<div id="MyDiv2" class="white_content">
    <div  style="width:385px; height:30px; background:#1ba67f; padding-left:15px; color:#fff; line-height:30px; font-size:14px;"> <span onclick="CloseDiv('MyDiv2','fade2')">
        <input type="button" class="addbtn">
        </span>商品收藏 </div>
    <div class="dialogbox">
        <p>商品收藏成功！</p>
    </div>
</div>

<div class="login" id="login">
    <div class="title"><h1>账号登录</h1><div class="close_login"><img src="__STATIC__/index/images/close2.png" title="关闭" alt="" /></div></div>
    <div class="pwd_login">
        <h1>密码登录</h1>
    </div>
    <div class="login_form">
        <form action="">
            <div class="field userfield">
                <img src="__STATIC__/index/images/l_03.png" alt="" />
                <input id="field_user" class="form_ipt" name="username" type="text" vlaue="" placeholder="用户名/邮箱/手机号" />
            </div>
            <div class="field pwdfield">
                <img src="__STATIC__/index/images/l_06.png" alt="" />
                <input id="field_pwd" class="form_ipt" name="password" type="password" value="" />
            </div>
            <div class="login_btn">
                <input type="button" value="登录" />
            </div>
        </form>
        <div class="other">
            <span><a href="{:url('user/register')}" target="_blank">免费注册</a></span>
            <span><a href="">忘记密码</a></span>
        </div>
    </div>
</div>
<script>
$(function(){
    $('.close_login img').click(function(){
        $('#login').hide();
    });

    $('.login_btn input').click(function(){
        var username = $('#field_user').val();
        var password = $('#field_pwd').val();
        var url = "{:url('user/ajaxLogin')}";
        var data = {'username':username,'password':password};
        $.post(url,data,function(result){
            if (result.code == 1) {
                location.href=result.data;
            }else if(result.code == 0){
                alert(result.msg);
                return;
            }
        },'json');
    });
});

</script>
</div>
</body>
</html>
